<template>
	<view class="container">

		<u-navbar :safeAreaInsetTop="true" :autoBack="true" title="详情" leftIconColor="#fff" titleStyle="color:#fff;"
			:bgColor="'rgba(255,255,255,'+opc+')'">

		</u-navbar>
		<!-- 轮播图 -->
		<u-swiper :list="list1" radius='0' height="774rpx" imgMode='aspectFill' :indicator='true' circular
			@change="e => current = e.current">

			<view slot="indicator" class="indicator">
				<view class="indicator__dot" v-for="(item, index) in list1" :key="index"
					:class="[index === current && 'indicator__dot--active']">
				</view>
			</view>
		</u-swiper>

		<view class="info">
			<!-- 价格和标题 -->
			<view class="price-title">
				<view class="u-flex u-flex-y-center">
					<text class="current-price">{{info.price || '--'}}</text>
					<text class="original-price" style="flex: 1;">¥{{info.old_price || '--'}}</text>
					<text class="tag">{{info.label || '--'}}</text>
				</view>
				<text class="goods-title">{{info.name || '--'}}</text>
			</view>

			<!-- 规格选择 -->
			<view class="spec" @click="show=true" v-if="false">
				<text class="spec-label">规格</text>
				<view class="spec-line">

				</view>
				<text class="spec-value">请选择规格</text>
				<u-icon name="arrow-right"></u-icon>
			</view>

			<!-- 库存和销量 -->
			<view class="stock-sales">
				<text class="stock">库存{{info.num}}</text>
				<text class="sales">销量: <text style="color: #ff4d30;">{{info.salenum}}</text> </text>
			</view>

		</view>
		<u-gap height="20rpx" bgColor="#f7f7f9"></u-gap>
		<!-- 评价 -->
		<view class="info">
			<view class="comment" @click="navto('/pages/goods/evaluate?id='+info.id)">
				<text class="comment-label">评价({{commentList.length}})</text>
				<text class="comment-expand">查看全部 </text>
				<u-icon name="arrow-right" color="#5993FE" size="24rpx"></u-icon>
			</view>
			<view class="con__item" v-if="commentList.length>0">
				<view class="u-flex u-flex-y-center">
					<image :src="commentList[0].avatar" class="con__item__tx" mode="aspectFill"></image>
					<view class="" style="flex: 1;">
						<view class="con__item__name">
							{{commentList[0].username}}
						</view>
						<view class="con__item__time">
							{{formatTimestamp(commentList[0].createtime)}}
						</view>
					</view>
					<view class="u-flex u-flex-y-center">
						<!-- <image src="/static/goods/qx.png" class="con__item__xin" mode=""></image> -->
						<u-rate count="5" v-model="commentList[0].score" :minCount='1' allowHalf size="24rpx"
							activeColor="#fff" inactiveColor="#ffffff" inactiveIcon='star-fill'></u-rate>
						<view class="con__item__num" style="margin-left: 10rpx;">
							{{commentList[0].score}}
						</view>
					</view>
				</view>
				<view class="con__item__cont">
					{{commentList[0].content}}
				</view>
				<view class="u-flex u-flex-y-center">
					<view class="con__item__ll" style="opacity: 0;">
						21次浏览
					</view>
					<!-- <image src="/static/goods/good.png" class="con__item__dz" mode="" @click="comOk(commentList[0])"></image> -->
					<u-icon name="heart" color="#000000" size="20" v-if="!commentList[0].is_ok"
						@click="comOk(commentList[0])"></u-icon>
					<u-icon name="heart-fill" color="#ff4d30" size="20" v-else @click="comOk(commentList[0])"></u-icon>
					<view class="con__item__dznum" @click="comOk(commentList[0])" style="margin-left: 4rpx;">
						{{commentList[0].good || 0}}
					</view>
				</view>
			</view>
			<!-- 详情介绍标题 -->
			<view class="detail-title">
				<text>详情介绍</text>
			</view>
		</view>

		<!-- 详情图片 -->
		<view class="detail-img">
			<image :src="$getImg(item)" mode="widthFix" class="detail-img-item"
				v-for="(item,index) in info.content_image.split(',') || []" :key="index" />
		</view>

		<!-- 底部按钮 -->
		<view class="footer" :style="{paddingBottom:$u.addUnit($u.sys().safeAreaInsets.bottom,'px')}">
			<view class="u-flex u-flex-y-center">
				<view class="footer__cz" @click="collect">
					<!-- <image src="/static/cao/dz.png" class="footer__icon" mode=""></image> -->
					<u-icon name="star" size="24" v-if="!favorited"></u-icon>
					<u-icon name="star-fill" size="24" v-else color="#ff1515"></u-icon>
					<view class="footer__text">
						收藏
					</view>
				</view>
				<view class="" style="width: 1rpx;height: 30rpx;background-color: #f8f8f8;">

				</view>
				<view class="footer__cz" @click="navto('/pages/personal/car')">
					<image src="/static/goods/car.png" class="footer__icon" mode=""></image>
					<view class="footer__text">
						购物车
					</view>
				</view>
			</view>
			<view class="u-flex u-flex-y-center">
				<view class="addcar btn" @click="addToCart">
					加购物车
				</view>
				<view class="buy btn" @click="show=true">
					立即购买
				</view>
				<!-- <u-button :customStyle="{width:'203rpx',height:'85rpx',padding:0,fontSie:'30rpx',margin:'0',}"
					shape='circle' color="#ff8830" text="加购物车"></u-button>
				<u-button :customStyle="{width:'203rpx',height:'85rpx',padding:0,fontSie:'30rpx',margin:'0',}"
					shape='circle' color="#ff4d30" text="立即购买"></u-button> -->
			</view>
		</view>
		<u-popup mode="bottom" :show="show" round="30rpx" @close="show=false">
			<view class="popbox">
				<view class="" style="padding: 0 30rpx;">
					<view class="popbox__addrbox" @click="navto('/pages/personal/addr')">
						<image src="/static/goods/addr.png" class="popbox__addrbox__icon" mode=""></image>
						<view class="" v-if="addressInfo.id" style="flex: 1;">
							<view class="" style="flex: 1;">
								<view class="popbox__addrbox__addr">
									{{addressInfo.province+addressInfo.city+addressInfo.area}}{{addressInfo.detail}}
								</view>
								<view class="popbox__addrbox__name">
									{{addressInfo.username}} {{addressInfo.mobile}}
								</view>
							</view>
						</view>
						<view class="" style="flex: 1;" v-else>
							暂无地址，请先新增地址
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="popbox__info">
						<view class="u-flex u-flex-y-center">
							<image :src="$getImg(info.image)" class="popbox__info__pic" mode="aspectFill"></image>
							<view class="">
								<view class="popbox__info__name">
									{{info.name || '--'}}
								</view>
								<view class="popbox__info__price">
									{{info.price || '--'}}
								</view>
								<u-number-box v-model="num">
									<view slot="minus" class="minus">
										<u-icon name="minus" size="24rpx" color="#6a6a6a"></u-icon>
									</view>
									<text slot="input"
										style="width: 78rpx;text-align: center;font-size: 30rpx;background-color: #F2F6F9;height: 48rpx;margin: 0 2rpx;"
										class="input">{{num}}</text>
									<view slot="plus" class="plus">
										<u-icon name="plus" color="#6a6a6a" size="24rpx"></u-icon>
									</view>
								</u-number-box>
							</view>
						</view>
						<!-- <view class="popbox__title">
							规格分类(2)
						</view>
						<scroll-view scroll-x="true" class="popbox__fl">
							<view class="popbox__fl__list">
								<view class="popbox__fl__item" v-for="(item,index) in gglisty" :key="index"
									@click="curgg=index" :class="curgg==index?'active':''">
									<image src="/static/home/pic.png" mode="aspectFill" class="popbox__fl__item__p">
									</image>
									<view class="popbox__fl__item__name">
										{{item.name}}
									</view>
								</view>
							</view>
						</scroll-view> -->
						<view class="popbox__bz" style="margin-top: 40rpx;">
							<view class="" style="flex: 1;">
								备注:
								<u--textarea v-model="remark" placeholder="请输入备注" border="none"></u--textarea>
							</view>
							<!-- <u-icon name="arrow-right"></u-icon> -->
						</view>
					</view>
				</view>
				<u-gap bgColor="#F7F7F9" height="18rpx"></u-gap>

				<u-radio-group v-model="value" iconPlacement="right" placement='column'>
					<u-radio activeColor="#FF4D30"
						:customStyle="{paddingRight: '30rpx',width:'720rpx',backgroundColor:value==item.name?'rgba(255, 77, 48, .05)':''}"
						v-for="(item, index) in radiolist1" :key="index" :name="item.name" @change="radioChange">
						<view class="popbox__pay">
							<image :src="'/static/goods/'+item.icon+'.png'" class="popbox__pay__icon" mode=""></image>
							<view class="popbox__pay__label">
								{{item.name}} <text v-if="item.name=='余额支付'">({{userInfo.money}})</text>
							</view>
						</view>
					</u-radio>
				</u-radio-group>
				<view class="popbox__footer">
					<u-button text="立即购买" color="#FF4D30" shape='circle' size="large" @click="submit"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getGoodsDetail,
		createOrder,
		isFavorited,
		favorite,
		goodsCommentOk
	} from "@/request/api/goods.js"
	import {
		getAddress,
		defaultAddress
	} from "@/request/api/address.js"
	import {
		goodsCommentIndex
	} from "@/request/api/order.js"
	import {
		userInfo,
		addcart
	} from "@/request/api/my.js"
	export default {
		data() {
			return {
				value: '微信支付',
				show: false,
				id: null,
				list1: [],
				current: 0,
				opc: 0,
				num: 1,
				curgg: null,
				userInfo: {
					money: 0,
				},
				favorited: false,
				commentList: [],

				info: {
					id: '',
					name: '',
					num: '',
					salenum: '',
					label: '',
					price: '',
					old_price: '',
					image: '',
					images: '',
					content_image: '',
				},
				remark: "",
				gglisty: [{
					name: '礼盒装'
				}, {
					name: '普通装'
				}, ],
				addressInfo: {

				},
				radiolist1: [{
						name: '微信支付',
						icon: 'wx'
					},
					{
						name: '余额支付',
						icon: 'ye'
					},
				]
			};
		},
		onLoad(opt) {
			this.id = opt.id;
			getGoodsDetail({
				id: this.id
			}).then(res => {
				this.list1 = res.data.images.split(',').map(item => {
					return this.$getImg(item)
				})
				this.info = res.data;
			})
			goodsCommentIndex({
				id: this.id
			}).then(res => {
				console.log(res)
				this.commentList = res.data.list;
			})
			isFavorited({
				id: this.id
			}).then(res => {
				this.favorited = res.data.favorited;
				console.log(res)
			})
		},
		onShow() {
			if (uni.getStorageSync('chooseId')) {
				getAddress({
					id: uni.getStorageSync('chooseId')
				}).then(res => {
					this.addressInfo = res.data;
				})

			} else {
				defaultAddress().then(res => {
					this.addressInfo = res.data;
				})
			}
			userInfo().then(res => {
				this.userInfo = res.data;
			})
		},

		methods: {
			comOk(item) {
				goodsCommentOk({
					id: item.id
				}).then(res1 => {
					goodsCommentIndex({
						id: this.id
					}).then(res => {
						console.log(res)
						this.commentList = res.data.list;
					})
				})
			},
			formatTimestamp(timestamp) {
				// 创建 Date 对象
				const date = new Date(timestamp * 1000); // 将时间戳转换为毫秒
				// 获取年份、月份、日期、小时、分钟、秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				const second = String(date.getSeconds()).padStart(2, '0');
				// 返回格式化的日期时间字符串
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
			submit() {
				let paytype = this.value == '微信支付' ? 2 : 1;
				if (!this.addressInfo.id) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					});
					return
				}
				if (paytype == 2) {
					uni.showToast({
						title: '微信支付暂未开通',
						icon: 'none'
					});
					return
				}
				if (paytype == 1 && this.userInfo.money < this.num * this.info.price) {
					uni.showToast({
						title: '余额不足',
						icon: 'none'
					});
					return
				}
				let param = {
					goods_id: this.info.id,
					address_id: this.addressInfo.id,
					paytype,
					total_price: this.num * this.info.price,
					remark: this.remark,
					num: this.num,
				}
				// console.log(param)
				createOrder(param).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: "/pages/goods/orderlist?status=1"
						})
					}

				})

			},
			radioChange(n) {
				this.value = n
			},
			collect() {
				favorite({
					id: this.id
				}).then(res1 => {
					isFavorited({
						id: this.id
					}).then(res => {
						this.favorited = res.data.favorited;
					})
				})
			},
			addToCart() {
				// 加入购物车逻辑
				// uni.showToast({
				// 	title: '加入购物车成功',
				// 	icon: 'success'
				// });
				addcart({
					num:1,
					goods_id:this.info.id
				}).then(res=>{
					console.log(res)
					uni.showToast({
						title: '加入购物车成功',
						icon: 'success'
					});
				})
			},
			buyNow() {
				// 立即购买逻辑
				uni.showToast({
					title: '立即购买',
					icon: 'success'
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: #e6e6e6;
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				width: 14px;
				background-color: #ff4d30;
			}
		}
	}

	.info {
		padding: 30rpx;
	}

	.price-title {
		margin-bottom: 10px;
	}

	.current-price {
		font-size: 40rpx;
		font-weight: bold;
		color: #ff4d30;
		margin-right: 10px;
		font-family: DINNextLTPro;

		&::before {
			content: "￥";
			font-size: 28rpx;
		}
	}

	.original-price {
		font-size: 28rpx;
		color: #999;
		text-decoration: line-through;
	}

	.tag {
		background-color: #fcecea;
		padding: 4rpx 10rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		color: #e55340;
	}

	.goods-title {
		display: block;
		font-size: 36rpx;
		margin-top: 10rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #ecedef;
		padding-bottom: 20rpx;
	}

	.spec {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.spec-label {
		font-size: 28rpx;
		color: #666;
	}

	.spec-line {
		height: 24rpx;
		width: 2rpx;
		background-color: #ecedef;
		margin: 0 20rpx;
	}

	.spec-value {
		font-size: 28rpx;
		flex: 1;
	}

	.stock-sales {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #4c4c4c;
	}

	.comment {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #ecedef;
	}

	.comment-label {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		flex: 1;
	}

	.comment-expand {
		font-size: 26rpx;
		color: #5993FE;
		margin-right: 10rpx;
	}

	.detail-title {
		text-align: center;
		font-size: 32rpx;
		margin: 20rpx 0 0;
	}

	.detail-img {
		padding-bottom: 150rpx;
	}

	.detail-img-item {
		width: 100%;
	}

	.bottom-buttons {
		display: flex;
		justify-content: space-around;
		width: 750rpx;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		align-items: center;
	}

	.footer {
		width: 750rpx;
		height: 138rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&__cz {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 134rpx;
		}

		&__icon {
			width: 42rpx;
			height: 40rpx;
		}

		&__text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #1D1D1D;
			line-height: 20rpx;
			margin-top: 9rpx;
		}
	}

	.btn {
		width: 240rpx;
		height: 90rpx;
		background-color: #ff8830;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;

	}

	.addcar {
		-webkit-clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
		clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
		border-radius: 45rpx 0 0 45rpx;
		margin-right: -10%;
		margin-left: 20rpx;
	}

	.buy {
		border-radius: 0 45rpx 45rpx 0;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
		background-color: #ff4d30;

	}

	.popbox {
		height: 90vh;
		position: relative;


		&__addrbox {
			height: 142rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #E9EAEC;

			&__icon {
				width: 36rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}

			&__addr {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #232323;
				line-height: 46rpx;
			}

			&__name {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #747474;
				line-height: 46rpx;
			}
		}

		&__info {
			padding: 40rpx 0;

			&__pic {
				width: 178rpx;
				height: 177rpx;
				background: #42C03D;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-right: 24rpx;
			}

			&__name {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 33rpx;
				color: #181818;
				line-height: 33rpx;
				margin: 5rpx 0 17rpx;
			}

			&__price {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 43rpx;
				color: #FF4D30;
				line-height: 43rpx;
				margin-bottom: 30rpx;

				&::before {
					content: "￥";
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #FF4D30;
					line-height: 43rpx;
				}
			}

			.minus,
			.plus {
				width: 48rpx;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #111A2B;
				background-color: #F2F6F9;
			}

			.minus {
				border-radius: 10rpx 0 0 10rpx;
			}

			.plus {
				border-radius: 0 10rpx 10rpx 0;
			}
		}

		&__title {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #0A1122;
			line-height: 30rpx;
			margin-top: 47rpx;
			margin-bottom: 33rpx;
		}

		&__fl {
			width: 690rpx;
			margin-bottom: 63rpx;

			&__list {
				display: flex;
				align-items: center;
			}

			&__item {
				height: 58rpx;
				background: #F2F6F9;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				border: 1rpx solid #ffffff;
				margin-right: 16rpx;
				flex-shrink: 0;

				&__p {
					width: 58rpx;
					height: 58rpx;
					background: #42C03D;
				}

				&__name {
					padding: 0 22rpx;
					background-color: #F2F6F9;
					display: flex;
					align-items: center;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #0A1122;
					line-height: 26rpx;
				}
			}

			.active {
				border-color: #e3432d;
			}
		}

		&__bz {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #141F32;
			line-height: 26rpx;
			display: flex;
			align-items: center;
		}

		&__pay {
			padding: 30rpx 0 30rpx 30rpx;
			display: flex;
			align-items: center;

			&__icon {
				width: 41rpx;
				height: 41rpx;
				margin-right: 20rpx;
			}

			&__label {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 27rpx;
				color: #010000;
				line-height: 27rpx;
				flex: 1;
			}
		}

		&__footer {
			padding: 47rpx 18rpx 47rpx 43rpx;
			width: 689rpx;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}

	.sales {
		font-size: 26rpx;
	}

	.con {
		&__item {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			// margin-bottom: 26rpx;
			padding: 33rpx 0 0;

			&__tx {
				width: 63rpx;
				height: 65rpx;
				background: #888A8C;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			&__name {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				line-height: 30rpx;
			}

			&__time {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 25rpx;
				color: #929292;
				line-height: 25rpx;
				margin-top: 20rpx;
			}

			&__xin {
				width: 34rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			&__num {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 32rpx;
				color: #000001;
				line-height: 32rpx;
				margin-top: 10rpx;
			}

			&__cont {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				line-height: 40rpx;
				margin: 30rpx 0;
			}

			&__ll {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 24rpx;
				color: #929292;
				line-height: 24rpx;
				flex: 1;
				margin-top: 10rpx;
			}

			&__dz {
				width: 33rpx;
				height: 31rpx;
				margin-right: 10rpx;
			}

			&__dznum {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				line-height: 30rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>